<template>
    <div class="reg">
        <van-nav-bar title="注 册" left-text="返回" left-arrow @click-left="$router.go(-1)" />
        <div class="submit">
            <van-form @submit="onSubmit">
                <!-- 输入任意文本 -->

                <van-field
                    class="reg-margin"
                    v-model="text"
                    size="large"
                    required
                    label="用户名"
                    placeholder="请输入用户名"
                />
                <!-- 输入密码 -->
                <van-field
                    class="reg-margin"
                    v-model="password"
                    size="large"
                    required
                    type="password"
                    label="密码"
                    placeholder="请输入密码"
                />
                <!-- 输入手机号，调起手机号键盘 -->
                <van-field
                    class="reg-margin"
                    v-model="tel"
                    size="large"
                    required
                    type="tel"
                    label="手机号"
                    placeholder="请输入手机号码"
                />
                <div style="margin: 16px;">
                    <van-button round block type="info" native-type="submit">提交</van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            tel: "",
            text: "",
            password: ""
        };
    },
    props: {},
    methods: {
        async onSubmit() {
            let res = await this.$axios({
                url: 'http://114.215.127.46:3333/api/reg',
                method: 'post',
                data:{
                    username: this.text,
                    password: this.password,
                    phone: this.tel
                }
            });
            
            if (!res.data.err) {
                this.$router.push('/login')
            }else {
                alert('注册失败');
            }
        }
    },
    components: {},
    mounted() {},
    updated() {}
};
</script>
<style scoped>
.submit {
    margin: 20px 10px;
}
.reg-margin {
    margin: 10px 0;
}
</style>
